<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            background-color: rgb(241, 242, 243);
        }

        .el-header {
            background-color: white;
        }

        .center {
            width: 1200px;
            margin: 0 auto
        }

        footer h3 {
            color: white;
        }

        #footer_center p {
            margin: 0;
        }


    </style>
</head>
<body>
<div id="app">
    <el-container>
        <my-header></my-header>
        <el-main class="center" style="margin-top: 30px">
            <el-row gutter="10">
                <el-col span="4">
                    <el-card style="height: 1000px">
                        <el-menu @select="handleSelect" style="border: 0" default-active="2" active-text-color="orange">
                            <el-menu-item index="1">
                                个人信息
                            </el-menu-item>
                            <el-menu-item index="2">
                                稿件管理
                            </el-menu-item>
                        </el-menu>
                    </el-card>
                </el-col>
                <el-col span="20">
                    <el-card>
                        <el-tabs v-model="type" type="border-card">
                            <el-tab-pane name="1" label="食谱">
                                <el-button type="primary" @click="location.href='postArticle.html?type=1'">发布食谱
                                </el-button>
                                <el-table :data="recipeArr" border>
                                    <el-table-column label="标题" align="center"
                                                     width="150px" prop="title"></el-table-column>
                                    <el-table-column width="60px" label="封面">
                                        <template slot-scope="scope">
                                            <img :src="scope.row.imgUrl" width="50px">
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="摘要" width="300px"
                                                     prop="brief" align="center"></el-table-column>
                                    <el-table-column label="类型" prop="categoryName"
                                                     align="center"></el-table-column>
                                    <el-table-column label="浏览量" prop="viewCount"
                                                     align="center"></el-table-column>
                                    <el-table-column label="回复量" prop="commentCount"
                                                     align="center"></el-table-column>
                                    <el-table-column label="创建时间" prop="createTime"
                                                     align="center"></el-table-column>

                                    <el-table-column label="操作" width="200px" align="center" fixed="right">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="success"
                                                       @click="handleEdit(scope.$index,scope.row)">编辑
                                            </el-button>
                                            <el-button size="mini" type="danger"
                                                       @click="handleDelete(scope.$index,scope.row)">删除
                                            </el-button>
                                        </template>
                                    </el-table-column>

                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane name="2" label="视频">
                                <el-button type="primary" @click="location.href='postArticle.html?type=2'">发布视频
                                </el-button>
                                <el-table :data="videoArr" border>
                                    <el-table-column label="标题" align="center"
                                                     width="150px" prop="title"></el-table-column>
                                    <el-table-column width="60px" label="封面">
                                        <template slot-scope="scope">
                                            <img :src="scope.row.imgUrl" width="50px">
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="类型" prop="categoryName"
                                                     align="center"></el-table-column>
                                    <el-table-column label="浏览量" prop="viewCount"
                                                     align="center"></el-table-column>
                                    <el-table-column label="回复量" prop="commentCount"
                                                     align="center"></el-table-column>
                                    <el-table-column label="创建时间" prop="createTime"
                                                     align="center"></el-table-column>

                                    <el-table-column label="操作" width="200px" align="center" fixed="right">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="success"
                                                       @click="handleEdit(scope.$index,scope.row)">编辑
                                            </el-button>
                                            <el-button size="mini" type="danger"
                                                       @click="handleDelete(scope.$index,scope.row)">删除
                                            </el-button>
                                        </template>
                                    </el-table-column>

                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane name="3" label="资讯">
                                <el-button type="primary" @click="location.href='postArticle.html?type=3'">发布资讯
                                </el-button>
                                <el-table :data="infoArr" border>
                                    <el-table-column label="标题" align="center"
                                                     width="150px" prop="title"></el-table-column>
                                    <el-table-column width="60px" label="封面">
                                        <template slot-scope="scope">
                                            <img :src="scope.row.imgUrl" width="50px">
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="摘要" width="300px"
                                                     prop="brief" align="center"></el-table-column>
                                    <el-table-column label="类型" prop="categoryName"
                                                     align="center"></el-table-column>
                                    <el-table-column label="浏览量" prop="viewCount"
                                                     align="center"></el-table-column>
                                    <el-table-column label="回复量" prop="commentCount"
                                                     align="center"></el-table-column>
                                    <el-table-column label="创建时间" prop="createTime"
                                                     align="center"></el-table-column>

                                    <el-table-column label="操作" width="200px" align="center" fixed="right">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="success"
                                                       @click="handleEdit(scope.$index,scope.row)">编辑
                                            </el-button>
                                            <el-button size="mini" type="danger"
                                                       @click="handleDelete(scope.$index,scope.row)">删除
                                            </el-button>
                                        </template>
                                    </el-table-column>

                                </el-table>
                            </el-tab-pane>
                        </el-tabs>


                    </el-card>
                </el-col>
            </el-row>

        </el-main>
        <el-footer style="background-color: #2f3234;
        height: 280px;padding: 50px 0">
            <div class="center" style="color: #666;text-align: center">
                <el-row gutter="20">
                    <el-col span="8">
                        <img src="imgs/icon.png">
                        <p>教程灵感就看烘焙坊</p>
                        <p>烘焙行业网络社区平台</p>
                        <p>全国百城上千个职位等你来</p>
                    </el-col>
                    <el-col span="8">
                        <el-row id="footer_center">
                            <el-col span="8">
                                <h3>关于我们</h3>
                                <p>关于我们</p>
                                <p>烘焙学院</p>
                                <p>烘焙食谱</p>
                                <p>分类信息</p>
                                <p>求职招聘</p>
                                <p>社区交流</p>
                            </el-col>
                            <el-col span="8">
                                <h3>服务与支持</h3>
                                <p>联系我们</p>
                                <p>广告投放</p>
                                <p>用户协议</p>
                                <p>友情链接</p>
                                <p>在线反馈</p>
                                <p>我发投稿</p>
                            </el-col>
                            <el-col span="8">
                                <h3>底部导航</h3>
                                <p>Archiver</p>
                                <p>手机版</p>
                                <p>小黑屋</p>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col span="8">
                        <div style="font-size: 60px;">
                            <span style="color: orange">烘焙</span>坊
                        </div>
                        <p>烘焙行业网络社区平台</p>
                    </el-col>
                </el-row>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="js/my-header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                recipeArr: [{
                    "id": 11,
                    "title": "入口即酥的超浓花生酱酥饼a",
                    "imgUrl": "imgs/0237dcfc-9f6a-47cd-b45e-59a5897f2992.jpg",
                    "brief": "花生酱+花生油=超浓郁花生香\n没有糖粉，用了白砂糖\n本是入口即酥\n却又在酥后留下些许颗粒感\n花生浓香",
                    "type": 1,
                    "categoryName": "家常菜",
                    "viewCount": 8,
                    "commentCount": 0,
                    "createTime": "2023/03/27 19:51:45"
                },
                    {
                        "id": 12,
                        "title": "枣泥花式面包,好吃到爆",
                        "imgUrl": "imgs/58fb9623-c229-4b52-9a99-a4ebb9045675.jpg",
                        "brief": "之前做了枣泥馅，配上花式面包，好吃到爆。\n \n枣泥花式面包的用料\n肉松面包面团 见肉松面包配方，枣泥",
                        "type": 1,
                        "categoryName": "面包",
                        "viewCount": 1,
                        "commentCount": 0,
                        "createTime": "2023/03/28 16:12:42"
                    },
                    {
                        "id": 13,
                        "title": "酥脆培根吐司芝士卷，人见人爱",
                        "imgUrl": "imgs/79b0dd4c-8bb8-43d8-b820-390307ae6e16.jpg",
                        "brief": "人见人爱的培根平时一般都是放吐司里面做三文治吃今天培根要露脸啦哈哈哈哈简单快手酥脆可口的培根吐司芝士",
                        "type": 1,
                        "categoryName": "家常菜",
                        "viewCount": 1,
                        "commentCount": 0,
                        "createTime": "2023/03/28 16:15:43"
                    },
                    {
                        "id": 14,
                        "title": "开放式三明治,一份小清新快手早餐",
                        "imgUrl": "imgs/7fe42b87-cd9c-41a8-bd59-5b726f462bc7.png",
                        "brief": "\n昨夜下了很怕人的骤雨，清晨办公桌上的薄荷微微抖动它的叶子。一份小清新快手早餐，让生活简洁不简单。\n",
                        "type": 1,
                        "categoryName": "小食",
                        "viewCount": 1,
                        "commentCount": 0,
                        "createTime": "2023/03/28 16:16:24"
                    },
                    {
                        "id": 15,
                        "title": "核桃葡萄干软欧：蔓越莓种面",
                        "imgUrl": "imgs/a168704d-bfcc-4a0f-9079-d15d98087662.jpg",
                        "brief": "干，来款核桃葡萄干软欧吧！核桃是个宝，好处太多，不一一列举啦！\n \n蔓越莓种面的用料\n主面团， 蔓越",
                        "type": 1,
                        "categoryName": "面包",
                        "viewCount": 2,
                        "commentCount": 0,
                        "createTime": "2023/03/28 16:16:56"
                    },
                    {
                        "id": 16,
                        "title": "蔓越莓绿豆糕，味道还不错值得一试!",
                        "imgUrl": "imgs/b393a19f-d2cb-41ff-b395-a4e08538c210.jpg",
                        "brief": "全家都很喜欢吃绿豆糕，但楼下甜品店的绿豆糕太甜了，那就自己动手做吧。之前尝试过带皮绿豆，颜色做出来没",
                        "type": 1,
                        "categoryName": "面包",
                        "viewCount": 4,
                        "commentCount": 0,
                        "createTime": "2023/03/28 16:17:35"
                    },
                    {
                        "id": 17,
                        "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
                        "imgUrl": "imgs/15fcffb1-3ef5-41dc-87d4-514469e10bdd.jpg",
                        "brief": "椰蓉的香味 任谁都抗拒不了吧正好还有半个红心火龙果做成了***嫩的小爱心面包可爱又好吃可以做9个。\n",
                        "type": 1,
                        "categoryName": "小食",
                        "viewCount": 15,
                        "commentCount": 1,
                        "createTime": "2023/03/28 16:18:12"
                    },
                    {
                        "id": 18,
                        "title": "爆浆抹茶甜甜圈面包，自带幸福感的小甜甜",
                        "imgUrl": "imgs/3daca90c-a075-48bb-bead-5f89bbdd42f8.jpg",
                        "brief": "爆浆抹茶甜甜圈面包好吃的起飞的爆浆抹茶甜甜圈，从里到外被抹茶包裹着，自带幸福感的小甜甜，抹茶控们完全",
                        "type": 1,
                        "categoryName": "家常菜",
                        "viewCount": 18,
                        "commentCount": 1,
                        "createTime": "2023/03/28 16:20:26"
                    }],
                videoArr: [{
                    "id": 19,
                    "title": "[甜品] 这样做彩虹果冻太惊艳了！在废弃的饼干盒里就能做，好...",
                    "imgUrl": "imgs/187e8406-7303-4d9f-bbae-49336acff977.jpg",
                    "brief": "",
                    "type": 2,
                    "categoryName": "家常菜教学",
                    "viewCount": 0,
                    "commentCount": 0,
                    "createTime": "2023/03/28 17:11:15"
                },
                    {
                        "id": 20,
                        "title": "入门级烘焙小零食，玛格丽特饼干，制作简单容易存放",
                        "imgUrl": "imgs/6f3936b5-64fd-46c5-84af-9717588b1b35.jpg",
                        "brief": "",
                        "type": 2,
                        "categoryName": "家常菜教学",
                        "viewCount": 0,
                        "commentCount": 0,
                        "createTime": "2023/03/28 17:11:53"
                    },
                    {
                        "id": 21,
                        "title": "不用面粉不用烤箱，也能做出像模像样的披萨，拥有芝士...",
                        "imgUrl": "imgs/15129351-7767-4eae-b793-6ef5bf17fbdd.jpg",
                        "brief": "",
                        "type": 2,
                        "categoryName": "美食欣赏",
                        "viewCount": 1,
                        "commentCount": 0,
                        "createTime": "2023/03/28 17:12:18"
                    },
                    {
                        "id": 22,
                        "title": "差点以为它是漂亮的芭比娃娃，原来是牛人做的翻糖蛋糕",
                        "imgUrl": "imgs/c4db3a0d-adf0-4686-9d51-5360626a6519.jpg",
                        "brief": "",
                        "type": 2,
                        "categoryName": "美食欣赏",
                        "viewCount": 3,
                        "commentCount": 0,
                        "createTime": "2023/03/28 17:12:41"
                    }],
                infoArr: [{
                    "id": 23,
                    "title": "1成都一蛋糕店遭恶意退单，一查竟是同行干的！对方回应：攻击错对象了 ...",
                    "imgUrl": "imgs/fdf718ec-41f3-4eeb-9ec6-8a068ed85038.jpg",
                    "brief": "五十单，导致损失数千元。\n这是什么情况?\n蹊跷订单一周连续遭遇四五十笔退单，损失数千元\n去年，王先生",
                    "type": 3,
                    "categoryName": "美食资讯",
                    "viewCount": 0,
                    "commentCount": 0,
                    "createTime": "2023/03/28 17:13:42"
                },
                    {
                        "id": 24,
                        "title": "烘焙行业越来越难做了？并不是",
                        "imgUrl": "imgs/a19bedd0-df90-4aa5-9f80-966ce7e5135c.jpg",
                        "brief": "\n 大城市市场竞争已是红海，装不下小知名品牌和个人店；而二四线下列大城市还处在大暴发前夕，非常容易创",
                        "type": 3,
                        "categoryName": "店家资讯",
                        "viewCount": 1,
                        "commentCount": 0,
                        "createTime": "2023/03/28 17:14:57"
                    },
                    {
                        "id": 25,
                        "title": "济南一知名品牌面包连锁店，多家门店关门，很多人充值卡还没消费完，记者调查发现... ...",
                        "imgUrl": "imgs/b032b739-5be1-4ad1-a028-ab914caed4f9.jpg",
                        "brief": "18日，记者联系到面包新语品牌官方一工作人员。她表示，目前仅是暂时关掉多家门店，并非退出济南市场，如",
                        "type": 3,
                        "categoryName": "美食资讯",
                        "viewCount": 2,
                        "commentCount": 0,
                        "createTime": "2023/03/28 17:15:31"
                    },
                    {
                        "id": 26,
                        "title": "85度C又出事了，饮品里喝出“订书针”，店员的一波操作让女子直接曝光！",
                        "imgUrl": "imgs/f8b8c3a9-ccb0-4531-a78b-dd1b2a69d02c.jpg",
                        "brief": "海峡消费报报道，福州一3岁小孩在85度C奶茶里喝出订书钉，卖家否认来源。\n\n近日，福州的郑女士在85",
                        "type": 3,
                        "categoryName": "店家资讯",
                        "viewCount": 6,
                        "commentCount": 2,
                        "createTime": "2023/03/28 17:16:00"
                    }],
                type: "1"
            }
        },
        methods: {
            handleEdit(i, c) {
                location.href = "./postArticle.html?type=" + c.type + "&id=" + c.id;
            },
            handleDelete(i, c) {
                if (confirm("您确认删除此内容吗?")) {
                    axios.post("/v1/contents/" + c.id + "/delete").then(function (response) {
                        if (response.data.code == 1) {
                            v.$message.success("删除完成!");
                            if (c.type == 1) {
                                v.recipeArr.splice(i, 1);
                            } else if (c.type == 2) {
                                v.videoArr.splice(i, 1);
                            } else {
                                v.infoArr.splice(i, 1);
                            }
                        }
                    })
                }
            },
            handleSelect(key, keyPath) {
                if (key == 1) {
                    location.href = "personal.html";
                }
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }

        },
        created: function () {
            if (location.search.includes("type")) {
                //把地址栏中的type取出
                this.type = new URLSearchParams(location.search).get("type");
            }
            //请求所有食谱
            axios.get("/v1/contents/1/management").then(function (response) {
                if (response.data.code == 1) {
                    v.recipeArr = response.data.data;
                }
            })
            //请求所有视频
            axios.get("/v1/contents/2/management").then(function (response) {
                if (response.data.code == 1) {
                    v.videoArr = response.data.data;
                }
            })
            //请求所有资讯
            axios.get("/v1/contents/3/management").then(function (response) {
                if (response.data.code == 1) {
                    v.infoArr = response.data.data;
                }
            })
        }
    })
</script>
</html>